<button class="join-button">
  Join Today
  <span class="arrow">
    <svg
      fill="#000000"
      xml:space="preserve"
      viewBox="0 0 32.00 32.00"
      id="Layer_1"
      version="1.1"
    >
      <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
      <g
        stroke-linejoin="round"
        stroke-linecap="round"
        id="SVGRepo_tracerCarrier"
      ></g>
      <g id="SVGRepo_iconCarrier">
        <line
          y2="16"
          x2="4"
          y1="16"
          x1="26"
          stroke-miterlimit="10"
          stroke-width="2.848"
          stroke="#f3bff3"
          fill="none"
        ></line>
        <polyline
          points="18,7.5 26.5,16 18,24.5"
          stroke-miterlimit="10"
          stroke-width="2.848"
          stroke="#f3bff3"
          fill="none"
        ></polyline>
      </g>
    </svg>
  </span>
</button>

<style>
/* From Uiverse.io by abhayexe  - Tags: button */
.join-button {
  background: rgb(226, 136, 243);
  background: linear-gradient(
    180deg,
    rgba(226, 136, 243, 1) 5%,
    rgba(143, 76, 215, 1) 71%,
    rgb(136, 37, 193) 93%,
    rgb(98, 29, 176) 100%
  );
  border-top: 3px solid rgb(248, 205, 247);
  border-bottom: 3px solid rgb(179, 64, 250);
  border-left: 3px solid rgb(240, 162, 250);
  border-right: 3px solid rgb(240, 162, 250);
  color: rgba(244, 221, 249, 0.888);
  text-shadow: 0px 1.5px #5000753d;
  height: 70px;
  border-radius: 20px;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.7s ease;
  box-shadow:
    -25px 25px 15px rgba(55, 1, 181, 0.272),
    -5px 5px 2px rgb(91, 1, 126),
    -15px 15px 10px rgba(116, 1, 126, 0.555);
}
.join-button svg {
  height: 30px;
  margin-bottom: -9px;
  margin-left: 5px;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.256));
}
.join-button:hover {
  transform: translateY(5px);
  box-shadow: -5px 5px 5px rgb(66, 1, 94);
  background: rgb(91, 37, 193);
  background: linear-gradient(
    180deg,
    rgba(91, 37, 193, 1) 5%,
    rgba(143, 76, 215, 1) 57%,
    rgba(226, 136, 243, 1) 100%
  );
}
.join-button:active {
  transition: transform 50ms ease-out;
  box-shadow: -3px 3px 0px rgb(21, 0, 30);
  transform: translateY(19px);
}

</style>
    